<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/20
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/product.css">
</head>
<script>
    $(function () {
        $("#topHtml").load("top.jsp");
        $("#footHtml").load("foot.jsp");
        chaxun();
    });

    function chaxun(num) {
        // $.ajax({
        //     url: "caixi",//调用后台的地址
        //     data: {caixi: num},//传递给后台的数据
        //     type: "get",//调用后台方法的类型 get post
        //     dataType: "json", //返回给页面的数据类型 json
        //     success: function (data) {//当调用成功以后开始执行的方法，data表示后台传递给前端的数据
        //         setHtml(data);
        //     }
        // })
        // setHtml(num);
    }

    //拼接HTML
    function setHtml(data) {
        if (data === undefined) {
            data = "";
        } else {
            data = $(data).html();
        }
        let html = '';
        for (let i = 0; i < 8; i++) {
            html += '<div>\n' +
                '            <div class="p-img"><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>\n' +
                '            <h4>豆腐' + data + '</h4>\n' +
                '            <div class="p-price">价格：<span>4:00</span></div>\n' +
                '            <div class="p-info">\n' +
                '                原料:猪五花肉500克、荔浦芋头400\n' +
                '                量克、青菜适、\n' +
                '            </div>\n' +
                '        </div>';
        }
        // $(data)拿到当前对象
        //$(data).html()对当前对象进行取值
        //动态添加背景颜色
        $(data).css({"background-color": "#e69137", "color": "#f3f3f3"});
        $("#p-product").html(html);
    }

    //当鼠标移上去的时候将其他背景颜色改变，自己不便
    function clearback(e) {
        $(e).css({"background-color": "#f3f3f3", "color": "#e69137"});
    }
</script>
<body>
<jsp:include page="top.jsp"></jsp:include>
<div class="p-content">
    <div class="banner-title">
        <div class="float-left">产品展示</div>
        <div class="title-plate float-right">
            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">川菜</div>
            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">粤菜</div>
            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">湘菜</div>
            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">鄂菜</div>
            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">闽菜</div>
            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">鲁菜</div>
        </div>
    </div>
    <!--    显示所有产品-->
    <div id="p-product" class="p-product">
        <c:forEach items="${productList}" var="product">
            <div>
                <div class="p-img"><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>
                <h4>${product.name}</h4>

                <div class="p-price">价格：<span>${product.price}</span></div>
                <div class="p-info">${product.content}</div>
            </div>
        </c:forEach>

    </div>

    <!--    分页-->
    <div class="news-page">
        <div>1</div>
        <div>2</div>
        <div>下一页&gt;</div>
        <div>尾页</div>
    </div>
</div>
</div>
<jsp:include page="foot.jsp"></jsp:include>
</body>
</html>